@import '~css/echoes-variables.scss';

@media (min-width: 320px) {
	$track-badge-index: 10;
	$track-button: 15;
	$track-border-color: #262829;
	$track-badge-color: $dark;
	$track-active-border-color: $brand-primary;
	$track-bg-active-color: rgba(10,10,10, .5);

	.now-playlist {
		position: relative;
		// opacity: 0;

		.nav-list {
			overflow-x: hidden;

			// > .active > .now-playlist-track__trigger {
			> .active > now-playlist-track a {
				color: white;
				box-shadow: inset 0px 0px 6px $track-bg-active-color;
				border-right: 6px solid $track-active-border-color;
				background: $track-bg-active-color;
			}
			> :not(.active) a:hover {
				background: rgba(10,10,10,.2);
			}
		}

		.now-playlist-track {
			cursor: pointer;
			opacity: 1;

			a .playlist-track__content {
				height: 6rem;
			}
		}
		// .as-sortable-placeholder {
		// 	background-color: $gray-darker;
		// 	border: 1px dashed white;
		// }

	}

	.ng-enter + .now-playlist.slide-down {
		transform: translatey(10px);
	}
}
@media (min-width: 768px) {
	.now-playlist {
		.now-playlist-track {
			a .remove-track {
				transform: translatex(5rem);
			}
			a .playlist-track__content {
				overflow: hidden;
			}
			// .now-playlist-track__trigger:hover {
			a:hover {
				.remove-track {
					transform: translatex(-1rem);
				}
			}
		}
	}
	.closed now-playlist {
		.now-playlist-track {
			// .now-playlist-track__trigger, 
			// .now-playlist-track__trigger.active {
			a, 
			a.active {
				padding: 0;
				min-height: 6rem;
				margin: 0.7rem 0;
			}
			.playlist-track__content {
				height: 0;
			}
			// span,
			// &.playlist-media .playlist-track {
			// 	display: none;
			// }
			.track-number {
				// display: block;
				left: 0;
			}
			.video-thumb {
				height: 5rem;
				width: 7rem;
			}
			.track-tracks {
				display: none;
			}
			.playlist-track {
				transform: translateX(5rem);
			}
		}
	}
}
